<template>
  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
    <div class="site-navbar__header"  :style="style">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">四川银政通</a>
        <a class="site-navbar__brand-mini" href="javascript:;" title="四川银政通"><font size="3">SCYZT</font></a>
      </h1>
    </div>

    <div class="site-navbar__body clearfix"  >

      <el-menu 
        class="site-navbar__menu"
        mode="horizontal" style="width:80%;">

        <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold" style="width:40px;">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>

      <el-menu-item  index="5"   >
        
        <template>
          <div style="font-size:16px;font-weight:bold;">{{ nowDate }}</div>
        </template>         
         
        </el-menu-item> 


       <el-menu-item  index="6"  >       
        <template>
          <div style="font-size:16px;font-weight:bold;">在线用户数：<font color="green">{{ online }}</font></div>
        </template>        
      </el-menu-item> 

      
      <el-menu-item  index="7"    >
          <!-- <marquee> -->
            <span  style="display:block;width:410px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" :title="orgName">
              <font color="red">测试环境</font>欢迎您，【{{ userName }}】
              {{ orgid }} {{orgName}} 
            </span>
          <!-- </marquee> -->
         
        </el-menu-item>

      </el-menu>


      <el-menu
        class="site-navbar__menu site-navbar__menu--right"
        mode="horizontal">



 



        <el-menu-item index="1" :title="'皮肤设置'" @click="$router.push({ name: 'theme' })"  style="border-bottom:0px;" >
          <template slot="title">
            <el-badge  >
              <icon-svg name="shezhi" class="el-icon-setting"></icon-svg>
            </el-badge>
          </template>
        </el-menu-item>

        <el-menu-item index="2" :title="'全屏功能（快捷键F11）'"  @click="isScreenFull()"   >
          <template slot="title" >
<svg t="1625496040391" style="width:22px;height:22px;" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3450" width="200" height="200"><path d="M147.4 187.1 283.7 323.4 322.7 284.3 324.6 282.5 190.4 148.2 329.8 148.2 329.8 90.3 89.5 90.3 89.5 329 147.4 329Z" p-id="3451" fill="#707070"></path><path d="M322.5 739.5 283.4 700.4 281.6 698.5 147.4 832.7 147.4 693.4 89.5 693.4 89.5 933.7 328.1 933.7 328.1 875.8 186.2 875.8Z" p-id="3452" fill="#707070"></path><path d="M694.2 90.3 694.2 148.2 833.6 148.2 701.2 280.6 699.4 282.5 738.5 321.6 740.3 323.3 876.6 187.1 876.6 329 934.5 329 934.5 90.3Z" p-id="3453" fill="#707070"></path><path d="M876.6 832.8 742.3 698.6 703.2 737.7 701.5 739.5 837.7 875.8 695.8 875.8 695.8 933.7 934.5 933.7 934.5 693.4 876.6 693.4Z" p-id="3454" fill="#707070"></path><path d="M512 291.1c-121.8 0-220.9 99.1-220.9 220.8S390.2 732.8 512 732.8 732.9 633.8 732.9 512 633.8 291.1 512 291.1zM675 512c0 89.9-73.1 163-163 163s-163-73.1-163-163c0-89.9 73.1-163 163-163S675 422.1 675 512z" p-id="3455" fill="#707070"></path></svg>
         </template>
        </el-menu-item>


        <el-menu-item class="site-navbar__avatar" index="3"   >
          <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="userName">             
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </nav>
</template>

<script>
  import UpdatePassword from './main-navbar-update-password'
  import screenfull from "screenfull";
  import { clearLoginInfo } from '@/utils'
  export default {
    data () {
      return {
        updatePassowrdVisible: false,
        isFullscreen: false,
        style: 'background-color:#17B3A3',
        nowDate: '',
        online: 0
      }
    },
    components: {
      UpdatePassword
    },
    created(){
      this.style = window.localStorage.getItem('color')
      if (!this.style){
          this.style = 'background-color:#17B3A3'
      }else{
          this.style = 'background-color:' + this.style
      }
      this.countOnline()
    },
    computed: {
      navbarLayoutType: {
        get () { return this.$store.state.common.navbarLayoutType }
      },
      sidebarFold: {
        get () { return this.$store.state.common.sidebarFold },
        set (val) { this.$store.commit('common/updateSidebarFold', val) }
      },
      mainTabs: {
        get () { return this.$store.state.common.mainTabs },
        set (val) { this.$store.commit('common/updateMainTabs', val) }
      },
      userName: {
        get () { return this.$store.state.user.name }
      },
      orgid: {
        get () { return this.$store.state.user.orgid }
      },
      orgName: {
        get () { return this.$store.state.user.orgName }
      }
    },
    
    mounted() {
      this.currentTime();
      this.onlinecount();
      
    },
    // 销毁定时器
    beforeDestroy() {
      this.destroyInterval()
    },
    methods: {
      destroyInterval(){
        if (window.formatDate) {
          clearInterval(window.formatDate); // 在Vue实例销毁前，清除时间定时器
          window.formatDate = null
        }
        if (window.countOnline ){
          clearInterval(window.countOnline);
          window.countOnline = null
        }
      },
      isScreenFull() {
      // 需要注意的是 如果判断!screenfull.enabled 显示的是不支持全屏的话 是因为谷歌的版本问题  判断改为 !screenfull.isEnabled  就可以了
       if (!screenfull.isEnabled) {
          // 如果不支持进入全屏，发出不支持提示
          this.$message({
            message: "您的浏览器版本过低不支持全屏显示！",
            type: "warning"
          });
          return false;
        }
        screenfull.toggle();
      },
      onlinecount(){
        if (!window.countOnline){
          window.countOnline = setInterval(this.countOnline, 60000);
        }
        
      },
      currentTime() {   
        if (!window.formatDate){
          window.formatDate = setInterval(this.formatDate, 500);
        }     
        
        
      },
      formatDate() {
            let date = new Date();
            let year = date.getFullYear(); // 年
            let month = date.getMonth() + 1; // 月
            let day = date.getDate(); // 日
            let week = date.getDay(); // 星期
            let weekArr = [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ];
            let hour = date.getHours(); // 时
            hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
            let minute = date.getMinutes(); // 分
            minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
            let second = date.getSeconds(); // 秒
            second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
            this.nowDate = `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`;
      },
        

      // 修改密码
      updatePasswordHandle () {
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs.updatePassowrd.init()
        })
      },
      // 退出
      logoutHandle () {
        this.$confirm(`确定进行[退出]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/logout'),
            method: 'post',
            data: this.$http.adornData()
          }).then(({data}) => {
            if (data && data.code === 0) {
              clearLoginInfo()
              this.destroyInterval()
              this.$router.push({ name: 'login' })
            }
          })
        }).catch(() => {})
      }
      ,
      // 退出
      countOnline () {
          var self = this
          this.$http({
            url: this.$http.adornUrl('/sys/online'),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              self.online = data.count
            }
          })
      }
      
    }
  }
</script>
<style>
svg:hover{

fill : rgb(0, 162, 255);
}

svg:hover path{
	fill:rgb(0, 162, 255);
}
</style>